<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅游平台</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        .r1c1{
            /* 设置边框 */
            border: 3px solid #fcfafa;
            /* 背景颜色 */
            background-color: rgb(252, 253, 252);
            /* 内边距
            padding: 10px;
             文本居中 
            text-align: center; */
        }
    </style>
</head>
<body>
<!-- 标题 -->
<header>
<div class="container-fluid">
  <!-- 定义一个包含导航栏的容器，class="container-fluid" -->
  <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
    <!-- 定义导航栏的头部，包含logo和toggle按钮 -->
    <a class="navbar-brand" href="index.html"><img src="./img/logo1.png" alt="" style="width: 100px;"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
     
       <!-- 定义导航栏的展开和折叠内容 -->
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="index.html">首页</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="jingguan1.html">热门城市</a>
            </li> 
            <li class="nav-item active">
              <a class="nav-link" href="4.0.html">热门景点</a>
            </li>
        </ul>
        <div class="btn-group">
          <a href="login.html" class="btn btn-outline-light">登录</a>
      </div>
      </div> 
  </nav>
</div>
</header>
<div class="clear"></div>
<br><br><br><br>

    <main class="container">

        <div id="demo" class="carousel slide" data-ride="carousel">

            <ul class="carousel-indicators">
                 <li data-target="#demo" data-slide-to="0" class="active"></li>
                 <li data-target="#demo" data-slide-to="1"></li>
                 <li data-target="#demo" data-slide-to="2"></li>
            </ul>
            <!-- 轮播图片 -->
            <div class="carousel-inner ">
                 <div class="carousel-item active">
                      <img src="./img/l3.jpg" class="rounded img-fluid">
                      <div class="carousel-caption d-none d-md-block">
                           <h1><b>庐山</b></h1>
                           <p><i>庐山以雄、奇、险、秀闻名于世，被誉为“人文圣山”   ，素有“匡庐奇秀甲天下”之誉 。</i></p>
                      </div>
                 </div>
                 <div class="carousel-item">
                      <img src="./img/tai2.jpg" class="rounded img-fluid">
                      <div class="carousel-caption d-none d-md-block">
                           <h1><b>泰山</b></h1>
                           <p><i>泰山，又名岱山、岱宗、岱岳、东岳、泰岳，为五岳之一，有“五岳之首”“天下第一山”之称 。</i></p>
                      </div>
                 </div>
                 <div class="carousel-item" >
                      <img src="./img/c1.jpg" class="rounded img-fluid">
                      <div class="carousel-caption d-none d-md-block">
                           <h1><b>长白山</b></h1>
                           <p><i>长白山常年白雪覆身、云雾缭绕，如同身着白衣的长者，总是庄严肃重。今天的长白山之名，人们还赋予了一个浪漫的解释：长相守，到白头。</i></p>
                      </div>
                 </div>
            </div>
            <!-- 左右切换按钮 -->
            <a class="carousel-control-prev" href="#demo" data-slide="prev">
                 <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#demo" data-slide="next">
                 <span class="carousel-control-next-icon"></span>
            </a>

       </div> 

        

        <div class="row r1c1 rounded mt-4">
             <!-- 定义一个包含图片、名称和链接的容器，class="col-sm-12" -->
             <div class="col-sm-12">
                 <!-- 定义一个包含图片、名称和链接的行，class="row" -->
                 <div class="row">
                    <!-- 定义一个包含图片、名称和链接的列，class="col-lg-4 col-md-6 mt-2" -->
                     <div class="col-lg-4 col-md-6 mt-2">
                         <img src="./img/1.jpg" class="img-fluid">
                         <h6 class="text-center">桂林</h6>
                         <a href="https://baike.baidu.com/item/%e6%a1%82%e6%9e%97%e5%b1%b1%e6%b0%b4/5583" class="btn btn-dark  btn-block">查看详情</a>
                         <a href="https://www.bilibili.com/video/BV1vN4y1P7fh/?spm_id_from=333.337.search-card.all.click&vd_source=aca2557c8d430af388209cecef947e7e" class="btn btn-dark  btn-block">观看旅游攻略</a>
                     </div>
                     <div class="col-lg-4 col-md-6 mt-2">
                         <img src="./img/t1.jpg" class="img-fluid">
                         <h6 class="text-center">故宫</h6>
                         <a href="https://baike.baidu.com/item/%E5%8C%97%E4%BA%AC%E6%95%85%E5%AE%AB/345415" class="btn btn-dark  btn-block">查看详情</a>
                         <a href="https://www.bilibili.com/video/BV1Xu411g7xd/?spm_id_from=333.337.search-card.all.click&vd_source=aca2557c8d430af388209cecef947e7e" class="btn btn-dark  btn-block">观看旅游攻略</a>
                     </div>
                     <div class="col-lg-4 col-md-6 mt-2">
                         <img src="./img/4.jpg"  class="img-fluid" >
                         <h6 class="text-center">长城</h6>
                         <a href="https://baike.baidu.com/item/%e9%95%bf%e5%9f%8e/14251" class="btn btn-dark  btn-block">查看详情</a>
                         <a href="https://www.bilibili.com/video/BV1XV411N7WW/?spm_id_from=333.337.search-card.all.click" class="btn btn-dark  btn-block">观看旅游攻略</a>
                     </div>
                     <div class="col-lg-4 col-md-6 mt-2">
                        <img src="./img/tai1.jpg" class="img-fluid">
                        <h6 class="text-center">泰山</h6>
                        <a href="https://baike.baidu.com/item/%E6%B3%B0%E5%B1%B1/5447" class="btn btn-dark  btn-block">查看详情</a>
                        <a href="https://www.bilibili.com/video/BV18P411k7f1/?spm_id_from=333.337.search-card.all.click&vd_source=aca2557c8d430af388209cecef947e7e" class="btn btn-dark  btn-block">观看旅游攻略</a>
                    </div>
                    <div class="col-lg-4 col-md-6 mt-2">
                        <img src="./img/t4.jpg" class="img-fluid">
                        <h6 class="text-center">黄鹤楼</h6>
                        <a href="https://baike.baidu.com/item/%E9%BB%84%E9%B9%A4%E6%A5%BC/62298" class="btn btn-dark  btn-block">查看详情</a>
                        <a href="https://www.bilibili.com/video/BV19F411U7dy/?spm_id_from=333.337.search-card.all.click&vd_source=aca2557c8d430af388209cecef947e7e" class="btn btn-dark  btn-block">观看旅游攻略</a>
                    </div>
                    <div class="col-lg-4 col-md-6 mt-2">
                        <img src="./img/l2.jpg"  class="img-fluid" >
                        <h6 class="text-center">庐山</h6>
                        <a href="https://baike.baidu.com/item/%E5%BA%90%E5%B1%B1/154518" class="btn btn-dark  btn-block">查看详情</a>
                        <a href="https://www.bilibili.com/video/BV1MT411U7Z3/?spm_id_from=333.337.search-card.all.click" class="btn btn-dark  btn-block">观看旅游攻略</a>
                    </div>
                 </div>
             </div>
        </div>

        <div class="container mt-4">
            <div class="row">
                <div class="col-lg-6">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <img  src="./img/4.jpg" class="rounded img-fluid card-img"/>
                                <div class="card-body">
                                    <h2 class="card-title">长城</h2>
                                    <p class="card-text"><strong>长城</strong>，又称万里长城，是中国古代的军事防御工事，是一道高大、坚固而且连绵不断的长垣，用以限隔敌骑的行动。长城不是一道单纯孤立的城墙，而是以城墙为主体，同大量的城、障、亭、标相结合的防御体系。长城修筑的历史可上溯到西周时期，发生在首都镐京（今陕西西安）的著名典故“烽火戏诸侯”就源于此 。春秋战国时期，列国争霸，互相防守，长城修筑进入第一个高潮，但此时修筑的长度都比较短。秦灭六国统一天下后，秦始皇连接和修缮战国长城，始有万里长城之称 。明朝是最后一个大修长城的朝代，人们所看到的长城多是此时修筑</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-4">
                        <div class="col-lg-12">
                            <div class="card">
                                <img  src="./img/tai1.jpg" class="rounded img-fluid card-img"/>
                                <div class="card-body">
                                    <h2 class="card-title">泰山</h2>
                                    <p class="card-text"><strong>泰山</strong> ，又名岱山、岱宗、岱岳、东岳、泰岳，为五岳之一，有“五岳之首”“天下第一山”之称 。位于山东省中部，隶属于泰安市   ，绵亘于泰安、济南、淄博三市之间，总面积25000公顷 ，主峰玉皇顶海拔约1545米。</p>
                                    <p class="card-text"><strong>泰山</strong> 泰山相伴上下五千年的华夏文明传承历史，集国家兴盛、民族存亡的象征于一身，是中华民族的精神家园，东方文化的缩影，“天人合一”思想的寄托之地，承载着丰厚的地理历史文化内涵  ，被古人视为“直通帝座”的天堂，
                                    成为百姓崇拜，帝王告祭的神山，有“泰山安，四海皆安”的说法。其景巍峨雄奇、幽奥俊秀，有石坞松涛、云海玉盘等美丽壮阔的自然景观。其历史文化、自然风光、地质奇观和谐融为一体，具有特殊的历史、文化、美学和科学价值。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-4">
                        <div class="col-lg-12">
                            <div class="card">
                                <img  src="./img/l2.jpg" class="rounded img-fluid card-img"/>
                                <div class="card-body">
                                    <h2 class="card-title">庐山</h2>
                                    <p class="card-text"><strong>庐山</strong> ，又名匡山、匡庐，位于江西省九江市庐山市境内。东偎婺源鄱阳湖，南靠南昌滕王阁，西邻京九铁路，北枕滔滔长江，耸峙于长江中下游平原与鄱阳湖畔，介于东经115°52′—116°8′，北纬29°26′—29°41′之间，长约25千米，宽约10千米，主峰汉阳峰，海拔1474米。山体呈椭圆形，典型的地垒式断块山。</p>
                                    <p class="card-text"><strong>庐山</strong> 以雄、奇、险、秀闻名于世，被誉为“人文圣山”   ，素有“匡庐奇秀甲天下”之誉 。自古命名的山峰有171座，群峰间散布冈岭26座，壑谷20条，岩洞16个，怪石22处。水流在河谷发育裂点，形成许多急流与瀑布，瀑布22处，溪涧18条，湖潭14处。最为著名的三叠泉瀑布，落差达155米，有“不到三叠泉，不算庐山客”之美誉。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <img  src="./img/t1.jpg" class="rounded img-fluid card-img"/>
                                <div class="card-body">
                                    <h2 class="card-title">故宫</h2>
                                    <p class="card-text">北京<strong>故宫</strong>是中国明清两代的皇家宫殿，旧称紫禁城，位于北京中轴线的中心。故宫内的建筑分为外朝和内廷两部分。外朝的中心为太和殿、中和殿、保和殿，统称三大殿，是国家举行大典礼的地方。三大殿左右两翼辅以文华殿、武英殿两组建筑。内廷的中心是乾清宫、交泰殿、坤宁宫，统称后三宫，是皇帝和皇后居住的正宫。其后为御花园。后三宫两侧排列着东、西六宫，是后妃们居住休息的地方。东六宫东侧是天穹宝殿等佛堂建筑，西六宫西侧是中正殿等佛堂建筑。外朝、内廷之外还有外东路、外西路两部分建筑。故宫是世界上现存规模最大、保存最为完整的木质结构古建筑群之一，是国家AAAAA级旅游景区， 1961年被列为第一批全国重点文物保护单位； 1987年被列为世界文化遗产。 </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mt-4">
                        <div class="col-lg-12">
                            <div class="card">
                                <img  src="./img/c1.jpg" class="rounded img-fluid card-img"/>
                                <div class="card-body">
                                    <h2 class="card-title">长白山</h2>
                                    <p class="card-text"><strong>长白山景区</strong> ，位于吉林省图安县二道白河镇池北区东南部，东南与朝鲜毗邻，坐落于长白山北坡，距长白山34公里，距双目峰中朝边境65公里，区域面积52.42平方公里，现为国家AAAAA级旅游景区。</p>
                                    <p class="card-text"><strong>长白山</strong> 自古以来就是中国的神圣领土，是<strong>中华十大名山</strong> 之一。长白山在《山海经》称不咸山，北魏称徒太山，唐称太白山，辽金已有长白山之名。</p>
                                    <p class="card-text">主峰<strong>长白山</strong>多白色浮石与积雪而得名，素有“千年积雪万年松，直上人间第一峰”的美誉。景区是拥有“神山、圣水、奇林、仙果”等盛誉的旅游胜地，也是满族的发祥地，在清代有“圣地”之誉，皇帝须亲自或委派大臣到吉林乌拉（今吉林市）望祭长白山</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mt-4">
                        <div class="col-lg-12">
                            <div class="card">
                                <img  src="./img/t4.jpg" class="rounded img-fluid card-img"/>
                                <div class="card-body">
                                    <h2 class="card-title">黄鹤楼</h2>
                                    <p class="card-text"><strong>黄鹤楼</strong>，位于湖北省武汉市武昌区，地处蛇山之巅，濒临万里长江，为武汉市地标建筑；始建于三国吴黄武二年（223年），历代屡加重修，现存建筑以清代“同治楼”为原型设计，重建于1985年；因唐代诗人崔颢登楼所题《黄鹤楼》一诗而名扬四海。自古有“天下绝景”之美誉，与晴川阁、古琴台并称为“武汉三大名胜”，与湖南岳阳岳阳楼、江西南昌滕王阁并称为“江南三大名楼”，是“武汉十大景”之首、“中国古代四大名楼”之一、“中国十大历史文化名楼”之一，世称"天下江山第一楼"。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-4">
                        <div class="col-lg-12">
                            <div class="card">
                                <img  src="./img/1.jpg" class="rounded img-fluid card-img"/>
                                <div class="card-body">
                                    <h2 class="card-title">桂林</h2>
                                    <p class="card-text"><strong>桂林</strong>处处皆胜景，漓江山水堪称其中的典范。漓江风光尤以桂林阳朔为最，“桂林山水甲天下，阳朔山水甲桂林；群峰倒影山浮水，无山无水不入神”，高度概括了阳朔自然风光的美。我们选择了从阳朔到桂林的路线，逆流畅游漓江。船驶出不久，远远地见到一座峰顶悬挂着一轮初日，缕缕阳光从云中穿过，江中波光粼粼，与群山倒影交相辉映，令人疑是到了仙境。如果说北方的山是豪迈﹑厚重的，那么桂林的山则显得妩媚﹑秀美。玉女峰婷婷玉立，巧梳云鬓；望夫崖凝神远眺，深情守候；赶考的书童，跳龙门的鲤鱼，盘旋的田螺，绿洲的骆驼，形态各异，变化万千，令游人目不暇接。“画山”的九匹马，在导游的引导与娓娓讲述中，更是令桂林的山出神入化到了极点，使游人真切地领略到了桂林山水的神奇、秀美。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>

            



     </main>
<br><br><br>
<!-- 底部导航栏 -->
<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-bottom">
    <input type="button" onclick="myFunction1()" class=" text-center btn btn-dark" style="width: 25%;" value="关于我们" />
    <input type="button" onclick="myFunction2()" class=" text-center btn btn-dark" style="width: 25%;" value="联系方式" />
    <input type="button" onclick="myFunction3()" class=" text-center btn btn-dark" style="width: 25%;" value="旗下网站" />
    <input type="button" onclick="myFunction4()" class=" text-center btn btn-dark" style="width: 25%;" value="特别致谢" />
</nav>
</body>
<script>
    function myFunction1(){
      alert("由第15组成员制作");
    }
    function myFunction2(){
      alert("email：1796745716@qq.com");
    }
    function myFunction3(){
      alert("暂时没有");
    }
    function myFunction4(){
      alert("www.baidu.com");
    }
    function showDiv() {
    var div = document.getElementById("myDiv");
    div.style.display = "block";
    }
    </script>
</html>